<template>
  <Form
    ref="formCustom"
    :model="formCustom"
    :label-width="80"
  >
    <FormItem
      label="作者"
      prop="author"
    >
      <Input
        type="text"
        v-model="formCustom.title"
      ></Input>
    </FormItem>
    <FormItem
      label="介绍"
      prop="passwdCheck"
    >
      <Input
        type="text"
        v-model="formCustom.conDesc"
      ></Input>
    </FormItem>
    <FormItem label="轮播图">
      <div class="banner">
        <div
          class="banner-item"
          :key="index"
          v-for="(item,index) in banner"
        >
          <div
            class="del"
            @click="delItem(index)"
          >
            <Button icon="ios-trash-outline">删除</Button>
          </div>
          <img
            style="width:100px;height:100px"
            :src="item"
            alt="轮播图"
          >
        </div>
      </div>

      <Upload
        action="//jsonplaceholder.typicode.com/posts/"
        :before-upload="bannerHandleUpload"
        multiple
      >
        <Button>上传图片</Button>
      </Upload>
    </FormItem>
    <FormItem
      label="封面"
      prop="passwdCheck"
    >
      <div>
        <img
          style="width:100px;height:100px"
          :src="formCustom.cover"
          alt="封面"
        >
      </div>
      <Upload
        action="//jsonplaceholder.typicode.com/posts/"
        :before-upload="handleUpload"
      >
        <Button>上传图片</Button>
      </Upload>
    </FormItem>

    <FormItem
      label="内容"
      prop="age"
    >
      <div id="editorId"></div>
    </FormItem>
  </Form>
</template>
<script>
// import Editor from "_c/editor";
import Editor from "wangeditor";
import { uploadInit } from "@/api/upimg";
var self;
export default {
  props: ["item"],
  data() {
    return {
      content: "",
      banner: [
        "https://image.yangpinwang.com/2021/01/31/middle/2956507_944ecd5ec6b4a7aeed916bb8f99c2823_1612093917.gif"
      ],
      isLocal: true,
      localTime: null,
      isLocalTime: 1000, //本地缓存的延迟时间
      formCustom: {
        title: "",
        conDesc: "",
        cover:
          "https://image.yangpinwang.com/2021/01/31/middle/2956507_944ecd5ec6b4a7aeed916bb8f99c2823_1612093917.gif",
        html: ""
      },
      ruleCustom: {
        // passwd: [{ validator: validatePass, trigger: "blur" }],
        // passwdCheck: [{ validator: validatePassCheck, trigger: "blur" }],
        // age: [{ validator: validateAge, trigger: "blur" }]
      }
    };
  },
  updated() {
    this.$emit("on-wst-goods-click", this.formCustom);
  },
  mounted() {
    self = this;
    const editor = new Editor("#editorId");
    editor.config.uploadImgServer = "/upload-img";
    editor.config.customUploadImg = uploadInit;
    editor.config.onchangeTimeout = 500; // 修改为 500ms
    editor.config.onchange = newHtml => {
      if (this.isLocal) {
        if (this.localTime) {
          clearTimeout(this.localTime);
        }
        this.localTime = setTimeout(() => {
          localStorage.setItem("localHtml", newHtml);
          this.$Message.info("本地保存成功");
        }, this.isLocalTime);
      }
      this.$set(this.formCustom, "html", newHtml);
      this.$emit("on-wst-goods-click", this.formCustom);
    };
    editor.create();
    if (this.isLocal) editor.txt.html(localStorage.getItem("localHtml"));
  },
  // components: { Editor },
  methods: {
    emit() {
      this.$emit("on-wst-goods-click", this.formCustom);
    },
    delItem(index) {
      this.banner.splice(index);
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success("Success!");
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleUpload(files) {
      uploadInit([files], res => {
        this.$set(this.formCustom, "cover", res);
      });
      return false;
    },
    bannerHandleUpload(files) {
      uploadInit([files], res => {
        this.banner.push(res);
        //  this.$set(this.banner, "banner", banner);
      });
      return false;
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    handleChange(html, text) {
      console.log(html, text);
    }
  }
};
</script>
<style>
.banner {
  display: flex;
  flex-wrap: wrap;
}
.banner > div {
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
}
.del {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
  opacity: 0;
  background: rgba(0, 0, 0, 0.8);
}
.banner > div:hover .del {
  z-index: 1;
  opacity: 1;
}
</style>
